<template>
	<view class="page_wrapper">
		<view class="pagebox">
			<view class="headimg">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar-wrapper" v-if="userInfo.headImg" :src="imgurl+userInfo.headImg" mode="">
					</image>
					<image class="avatar-wrapper" v-else src="../../../static/nimg/headimg.png" mode=""></image>
				</button>
				<span style="color: #989898;">点击修改头像</span>
			</view>
			<view class="formbox">
				<span style="font-weight: bold;">昵称:</span>
				<input type="nickname" v-model="userInfo.nickname" @blur="onInput" placeholder="请输入昵称" />
			</view>
			<!-- <view class="formbox">
				<span style="font-weight: bold;">手机号:</span>
				<input type="number" v-model="userInfo.mobile" placeholder="请输入手机号" />
			</view> -->
		</view>
		<button class="savebtn" @click="handleSave()">保存修改</button>
		<img class="page_bg_img" src="../../../static/nimg/bg.png" alt="" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	import {
		storageData
	} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				userInfo: {
					nickname: '',
					headImg: ''
				},
				imgurl: "https://www.hzif.cn/mathematics-attach/",
			}
		},
		onLoad() {
			this.userInfo = storageData.getLoginUser() || {}
			this.userInfo.nickname = this.userInfo.nickname ? decodeURIComponent(this.userInfo.nickname) : ""
		},
		methods: {
			onChooseAvatar(e) {
				console.log('选择头像', e);
				const {
					avatarUrl
				} = e.detail
				const $this = this
				uni.uploadFile({
					url: 'https://www.hzif.cn/mathematics/attach/upload',
					filePath: avatarUrl,
					name: 'file',
					header: {
						"Accept": "application/json",
						'Content-Type': 'multipart/form-data',
						'FrontAuthorization': "Bearer" + this.userInfo.accessToken
					},
					success(res) {
						if (res.errMsg == "uploadFile:ok") {
							let obj = JSON.parse(res.data)
							$this.userInfo.headImg = obj.result.name
						}
					}
				})
			},
			onInput(e) {
				const {
					value
				} = e.detail
				console.log('输入昵称', value, e);
				this.userInfo.nickname = value
			},
			handleSave(){
				// console.log(this.userInfo);
				// storageData.saveLoginUser(this.userInfo)
				// uni.navigateBack()
				// return
				let that = this
				if(this.userInfo.headImg && this.userInfo.nickname!=""){
					request.postJson("/account/saveAccount",{
						avatarUrl:that.userInfo.headImg,
						nickName:that.userInfo.nickname
					}).then((res)=>{
						if(res.code === 200){
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							storageData.saveLoginUser(that.userInfo)
							uni.navigateBack()
						}else{
							uni.showToast({
								title:res.message || '保存失败',
								icon:'none'
							})
						}
					})
				}else{
					uni.showToast({
						title:'请输入头像/昵称'
					})
				}
			},
		}
	}
</script>

<style>
	.headimg{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
		row-gap: 10rpx;
	}
	.page_bg_img {
		position: absolute;
		z-index: 2;
		height: 100%;
		width: 100%;
	}
	.pagebox{
		position: relative;
		display: flex;
		flex-direction: column;
		row-gap: 40rpx;
		z-index: 4;
	}

	.avatar-wrapper {
		width: 160rpx;
		height: 160rpx;
		border: none;
		border-radius: 50%;
		padding: 0;
		margin: 0;
	}

	.avatar-wrapper::after {
		border: none;
	}
	.formbox{
		display: flex;
		height: 110rpx;
		width: 80%;
		margin: 0 auto;
		border-radius: 30rpx;
		align-items: center;
		color: #074f1e;
		background-color: #c4e6c2;
		column-gap: 14rpx;
		font-size: 16px;
		padding: 0 20rpx;
	}
	.formbox label{
		width: 120rpx;
	}
	.savebtn{
		position: fixed;
		z-index:4;
		width: 90%;
		left: 0;
		right: 0;
		bottom: 100rpx;
		margin: 0 auto;
		border: none;
		background-color: #2e996c;
		color: white;
		border-radius:60rpx;
	}
	.savebtn::after{
		border: none;
	}
</style>